<template>
  <div class="charging-card">
    <div class="card-header">
      <div class="card-title">
        <span class="vin">VIN:{{ vin }}</span>
        <span class="id">ID:{{ id }}</span>
      </div>
      <div 
        class="status-tag" 
        :class="{
          'charging': status === '充电中',
          'completed': status === '已结束',
          'pending': status === '未开启',
          'error': status === '异常终止'
        }"
      >
        {{ status }}
        <i class="status-dot" :class="{ 'charging-dot': status === '充电中' }"></i>
      </div>
    </div>

    <div class="card-content">
      <div class="info-item">
        <span class="info-label">开始时间：</span>
        <span class="info-value">{{ startTime }}</span>
      </div>
      <div class="info-item" v-if="status === '充电中'">
        <span class="info-label">实时状态：</span>
        <span class="info-value">{{ realTimeStatus }}</span>
      </div>
      <div class="info-item">
        <span class="info-label">充电时长：</span>
        <span class="info-value">{{ chargingDuration }}</span>
      </div>
      <div class="info-item">
        <span class="info-label">已充电度数：</span>
        <span class="info-value">{{ chargeAmount }} kWh</span>
      </div>
      <div class="info-item">
        <span class="info-label">当前电量：</span>
        <span class="info-value">{{ soc }}%</span>
      </div>
      <div class="info-item">
        <span class="info-label">目标电量：</span>
        <span class="info-value">{{ targetSoc }}%</span>
      </div>
      <div class="info-item" v-if="status === '已结束'">
        <span class="info-label">结束时间：</span>
        <span class="info-value">{{ endTime }}</span>
      </div>
      <div class="info-item error-item" v-if="status === '异常终止'">
        <span class="info-label">终止原因：</span>
        <span class="info-value">{{ stopReason }}</span>
      </div>
    </div>

    <div class="card-actions">
      <van-button 
        v-if="status === '未开启'" 
        type="primary" 
        size="small" 
        @click="$emit('start-charging')"
      >
        开始充电
      </van-button>
      <van-button 
        v-if="status === '充电中'" 
        type="warning" 
        size="small"
      >
        暂停充电
      </van-button>
      <van-button 
        v-if="status === '已结束' || status === '异常终止'" 
        type="info" 
        size="small" 
        @click="$emit('start-charging')"
      >
        再次充电
      </van-button>
    </div>
  </div>
</template>

<script setup>
import { Button } from 'vant';
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  vin: String,
  id: String,
  status: String,
  startTime: String,
  realTimeStatus: String,
  chargingDuration: String,
  chargeAmount: Number,
  soc: Number,
  targetSoc: Number,
  endTime: String,
  stopReason: String
});

const emit = defineEmits(['start-charging']);
</script>

<style scoped>
.charging-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 12px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f5f5f5;
}
.vin {
  font-weight: 500;
  color: #333;
}
.id {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}
.status-tag {
  padding: 4px 8px;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
}
.status-tag.charging {
  background-color: #28a745;
}
.status-tag.completed {
  background-color: #6c757d;
}
.status-tag.pending {
  background-color: #ffc107;
}
.status-tag.error {
  background-color: #dc3545;
}
.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ccc;
  margin-left: 4px;
}
.charging-dot {
  background-color: #fff;
}
.card-content {
  margin-bottom: 8px;
}
.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 14px;
}
.info-label {
  color: #666;
}
.info-value {
  color: #333;
  font-weight: 500;
}
.error-item .info-value {
  color: #dc3545;
}
.card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
</style>